<template>
	<div class="wrapper">
		<h2 class="tit">家医签约详情</h2>
		<div class="main">
			<p class="title">基本信息</p>
			<div class="items-wrapper">
				<Row gutter='16'>
					<Col span="8">
						<div class="item">
							<label>签约人：</label>
							<span class="content">{{info.memberName}}</span>
						</div>
						<div class="item">
							<label>出生年月：</label>
							<span class="content">{{info.birthday && info.birthday.slice(0, 10)}}</span>
						</div>
						<div class="item">
							<label>注册手机号：</label>
							<span class="content">{{info.telephone}}</span>
						</div>
						<div class="item">
							<label>签约机构：</label>
							<span class="content">{{info.orgName}}</span>
						</div>
						<div class="item">
							<label>签约状态：</label>
							<span class="content">{{['待付款', '签约审核中', '签约成功', '签约拒绝','签约过期','解约', '系统自动拒绝','取消','退款中'][info.status+1]}}</span>
						</div>
					</Col>
					<Col span="8">
						<div class="item">
							<label>性别：</label>
							<span class="content">{{['', '男', '女'][info.gender]}}</span>
						</div>
						<div class="item">
							<label>身份证号：</label>
							<span class="content">{{info.idCard}}</span>
						</div>
						<div class="item">
							<label>申请时间：</label>
							<span class="content">{{info.applyTime && info.applyTime.slice(0, 10)}}</span>
						</div>
						<div class="item">
							<label>签约类型：</label>
							<span class="content">{{['', '签约个人', '签约团队'][info.contractType]}}</span>
						</div>
						<div class="item">
							<label>签约开始时间：</label>
							<span class="content">{{info.contractStartTime && info.contractStartTime.slice(0, 10)}}</span>
						</div>
					</Col>
					<Col span="8">
						<div class="item">
							<label>年龄：</label>
							<span class="content">{{info.age}}</span>
						</div>
						<div class="item">
							<label>现住址：</label>
							<span class="content">{{info.presentAddr}}</span>
						</div>
						<div class="item">
							<label>签约周期：</label>
							<span class="content">{{['一年', '两年', '三年'][info.serviceCycle]}}</span>
						</div>
						<div class="item" v-if="info.contractType === 1">
							<label>签约医生：</label>
							<span class="content">{{info.doctorName}}</span>
						</div>
						<div class="item" v-if="info.contractType != 1">
							
						</div>
						<div class="item">
							<label>签约结束时间：</label>
							<span class="content">{{info.contractEndTime && info.contractEndTime.slice(0, 10)}}</span>
						</div>
					</Col>
					<Col span="23">
						<div class="item spacial" v-if="info.contractType == 2">
							<label>团队成员：</label>
							<div v-for="(teamer, index) in info.teamDetails" style="paddingTop: 4px;">
								<span><span v-if="index !== 0">&nbsp;/&nbsp;</span>{{teamer.doctorName}}</span>
							</div>
						</div>
					</Col>
				</Row>
			</div>
		</div>
		<div class="main">
			<p class="title">签约服务包</p>
			<div class="items-wrapper">
				<div class="item" v-for="service in info.servicePackages">
					<label>{{service.packageName}}：</label>
					<span class="content bao">{{service.amt}}元</span>
				</div>
			</div>
		</div>
		<div class="main">
			<p class="title">电子信息</p>
			<div class="items-wrapper">
				<div class="dianzi">
					<div class="left">
						<p>电子取证:</p>
						<div class="demo-upload-list" v-for="file in info.evidenceFiles">
							<img :src="fileBaseUrl + file.fileName">
							<div class="demo-upload-list-cover">
								<Icon type="ios-eye-outline" @click="handleView(fileBaseUrl + file.fileName)"></Icon>
							</div>
						</div>
					</div>
					<div class="right">
						<p>电子签名:</p>
						<div class="demo-upload-list" v-if="info.signatureFile">
							<img :src="fileBaseUrl + info.signatureFile.fileName">
							<div class="demo-upload-list-cover">
								<Icon type="ios-eye-outline" @click="handleView(fileBaseUrl + info.signatureFile.fileName)"></Icon>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<Modal title="预览图片" width="30" v-model="visible" footer-hide>
			<div>
				<img :src="curImg" style="width: 100%" />
			</div>
		</Modal>
	</div>
</template>

<script>
import api from "@/api/commonApi";
export default {
  props: {
    onloaded: Function,
    type: {
        type: String,
        default: '' // feeBack为退费 jiayiqianyue为家医签约
    },
	businessId: [Number, String],
  },
  data() {
    return {
      info: {},
      visible: false,
      curImg: '',
      url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587533515161&di=2e2493ac4cba9ae267564a430a2d6ef6&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F78%2F52%2F01200000123847134434529793168.jpg',
	  id: ''
    }
  },
  mounted() {   
	this.id = this.$route.query.contractId ? this.$route.query.contractId : this.businessId
	this.findKbafFdsOrderManageDetail();
  },
  methods: {
    handleView(url) {
      this.curImg =  url;
      this.visible = true;
    },
    findKbafFdsOrderManageDetail() {
      this.$axios
        .post(api.findFdsOrderDetail,{id: this.id})
        .then(res => {
          if (res.data.code === 1) {
            this.info = this.deepClone(res.data.object);
            this.info.evidenceFiles && (this.info.evidenceFiles = JSON.parse(this.info.evidenceFiles));
            this.info.signatureFile && (this.info.signatureFile = JSON.parse(this.info.signatureFile));
            this.onloaded(this.info);
          } else {
            this.$Message.error(res.data.message || "请求异常");
          }
        })
    },
    deepClone(obj) {
      return JSON.parse(JSON.stringify(obj));
    }
  }
}
</script>

<style scoped lang="less">
.wrapper {
    padding: 10px 0;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
	.tit {
		margin:10px 0;
		font-weight:bold;
		text-align:center;
	}
	.main{
		width: 98%;
		display: flex;
		flex-direction: column;
		margin: 10px auto;
		border: 1px solid #f0f0f0;
		box-shadow: 0 4px 3px #ebedf8;
		border-radius: 5px;
		margin-bottom: 20px;
		overflow: hidden;  
		border-radius: 5px;
		.title {
			font-size: 20px;
			padding-left: 15px;
			margin-bottom: 20px;
			color: #333;
			height: 40px;
			line-height: 40px;
			background: #ebedf8;  
		}      
		.items-wrapper {
			margin: 0 35px;
			padding-bottom: 20px;
			.item {
				display: flex;
				color: #000;
				height: 30px;
				margin-bottom: 3px;
				&.spacial {
					height: auto;
				}
				label {
					min-width: 130px;
					height: 30px;
					line-height: 30px;
				}
				.content {
					width: 100%;
				}
				.bao {
					margin-left: 10px;
				}
			}
			.dianzi {
				display: flex;
				.left {
					flex: 1 1 auto;
				}
				.right {
					flex: 1 1 auto;
				}
			}
		}
	}
}
.demo-upload-list{
    display: inline-block;
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
}
.demo-upload-list img{
    width: 100%;
    height: 100%;
}
.demo-upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
    display: block;
}
.demo-upload-list-cover i{
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    margin: 0 2px;
}
</style>